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The General Objectives of Computer 


Atthe end of the First term the student will be able to: 


va ve. Know some ofthe concepts of operations related to infrastructure for 
computer systems, databases, programming languages of creating Web 
pages, and secure websites, etc. ........ 

va ve. Know some basic concepts and processes related to applications and 
services of information and communicationtechnology. 

za. ve Understand some aspects of intellectual security (human and moral and 
social) andthe security of information related to the use of information and 
communication technology. 

za. ve Use production technology tools (HTML & PHP & SQL ....)inthe support 
and development of education. 

za. эз Produce the project of "Illustrated Dictionary of computerterms" using 
the processes and programs and technological tools. 

x ve. Employ technologicaltools of communication inthe exchange of 
content, communication and interact and cooperate with others to support 
learning 

э 2a The use oftechnologicaltools and resources in dealing with information 


and data, electronic processing and evaluating and reporting the results. 
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The specified objectives of computer 


Atthe end ofthe Firstterm the student willbe ableto: 
Show some advanced scientific concepts and terms related to the computer. 
Employ computer programs inthe implementation of learning tasks. 
Employ network of Internet services inthe teaching and learning processes. 
Practice searches for all forms of electronic information on the computers and networks 
reliable in solving the problem of information. 
Suggest simple projects to employ the applications and information and 
Communication technology services inthe fields of study and life. 
Employ information and communication technology applications in exchange projects’ 
tasks. 
Employ some of desktop programs and applications (Worksheets - Data 
Bases..) in producing specific tasks within educational projects. 
Employ several programs to solve educational and life problems. 
Design suitable data base for his project. 
Practice PHP programming skills. 
Use some of Internet applications in the implementation of his project. 
Designinteractive Web pages for his project. 
Link the interactive Web pages with Databases. 
Produce aproject using advanced Internet applications. 
Identify HTML language and PHP andits applications in web design. 
Practice dealing with electronic information skills (identifying – evaluating – selecting - 
organizing. ) 
Employ electronic information sources associated with a specific project inthe 
implementation of the project. 
Learn some ofthe transactions related to PHP language. 


Learn some ofthe concepts and formulas related to the IF and Switch statement. 
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Date 
Session 
Class 


Unit 1: Basics of Web Site Design 
Lesson 1: Cybernetic Entrance of 
the Project 


Learning Objectives: Strategy 


By the end ofthe lesson, the student should be able to: Brain storming = Dialogue and discussion 


= Recognize some basic concepts and terminology Corporative learning 


associated with creating a Web site dealing with 


databases. Teaching aids 


Electronic board - Student's Book - 


" Distinguishes static web and dynamic web pages. é 
- presentation 


=" Practice preparing computer operations to become a 
SERVER. 


Warm up / What are the types of web sites? 


Lesson Presentation 


During the implementation of the "Illustrated Dictionary of computer terms" you should recognize some 
important basic concepts that we are going to use 


1- Freeware Programs:-They are the programs whose owner allows others to use them free of charge or 
with written permission from him. 
2- Open Source Programs:- They are the programs and published applications that give users access to 
the code, the possibility to modify, develop it in the light of the needs of its developers, and republish or 
use it after the amendment. 
3- Static Web Page:-It is an Information page that is displayed through one of the Internet browsers. It can 
be saved along .htm, .html page. 
4- Dynamic Web Раде:-Н is an information page available on the Internet. It can be written in PHP or 
ASP.net. 
5- Server:- The term is intended to two different meanings: 

1. Hardware Server: which is the highest powerful computer network. (It's the computer Hardware Server 

in a computer network. 

2. Software server: which is as a task or role run in the network. 
6- Script:-It is a sequence of instructions or code written in one of Web pages languages customized for 
web pages to perform a task or to process some of the data. 
7- HTML" Hyper Text Markup Language: -It's the language used to create the Static Web Page. This page 
can be saved along .htm, and displayed through one of the Internet browsers. 
8- The language of PHP "Personal Home Page":-It's one of the specialized languages in developing 
dynamic web sites. It's a free open source language characterized by ease, speed, and operates the Server 
Side Language. Its own code can be included within the HTML code, and can easily connect different data 
bases safely. 
9- Apache Server:-This program is used with Server devices or simulates your personal computer to act as 
Server device. 
10- Publishing Web Site:-There are two ways to publish a site: 
11- SQL "Structured Query Language":- It's a programming language used in all operations of database. 
13- " Web Server Packages":- for example, Web applications package LAMP (Linux - Apache - MySQL - 
PHP), The essential difference between the previous web applications packages is the operating system 
you are working with. 
14- Session:-It's a way to store information about the user (visitor of the website) in order to make it 
available for use across the pages of the site. 


Evaluation: - 
Complete: The essential difference between the previous web applications packages is 


Prepared and Designed by/ 2.251 35 JI 32.2 (3353 5,2 - Yasmin Shoaeb 


Unit 1: Basics of Web Site Design 
Lesson 2: Planning the Project Site 
"Illustrated Dictionary of Computer Terms" 


By the end ofthe lesson, the student should be able to: Brain storming = Dialogue and discussion 


= Determine required tasks to create a web site. Corporative learning 
= Plan the main page of awebsite. 


=" Load XAMPP programto run MySQL and Apache 


երն Electronic board - Student's Book - 
applications. 


- presentation 


Warm up / What are the tasks to be implemented in creating the site? 


Lesson Presentation 


» Aim of project: - Designing and creatingsite of "Illustrated Dictionary of computerterms by using free 
oropensource programs andapplications. 
» The importance of the project: - liesin making you practice writing your PHP code of dealing with 
MySQL through website pages. 
» Thetasks to be implemented in creating the site of, "Illustrated Dictionary of computer terms": 
Configuring the suitable environment for creating a site. 
& Creating database for saving the data of terms dictionary that are inserted or modified through web pages. 
® Designing the main page 
о Adding a term in Arabic and English, term scientific definition and a picture referring to a term and saving it in 
database. — = AI 
& Searching for a term in database. 
® Deleting a term in database 
о Modifying a term data in database. 
Providing the required help on how to deal with the site. 
» Stepsto create web site: 
1. Configure the appropriate environment to create web site by the following: 
» Setup programs (apache and xampp). 
» Save web page files in server and display in one of internet browsers. 
» Prepare personal computer to be server. 
2. Implementation of project (terms dictionary) by 3 steps 
» Create of database (my SQL and access). 
» Create static web page using html code and expression web. 
» Convert static web page to dynamic web page by using php inside html code. 
> And finally we display web sites by using internet browsers such as : 
Internet explorer - Firefox - google chrome. 
» Notes: 
We save information of web pages in server by one of the following: 
e Web sites with cost by booking web site in one of host servers. 
e Without cost by one of free internet sites which allow hosting web site. 
e Publishing web site locally. 


Evaluation: - 
Complete: We save information of web pages in 
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Unit 2: Requirements and production 
stages of the project 
Lesson 1: Design Web page 


By the end of the lesson, the student should be able to: Corporative learning - Dialogue and 


= Designthe home web page forthe Computer discussion 
Terminology Dictionary site. 
= Determine the necessary navigation links between 


pages ofthe site Electronic board - Student's Book - 


: ; : - presentation 
= Discuss with his collogues several proposals forthe 


design of the project pages. 


Warm up / What are the stages of creating a web site? 


Lesson Presentation 


> Producing the “Computer Terminology Dictionary” project passes through a number of stages as 
follows: 
Stage (1) | 
Designing Web Pages | 


Stage (2) 


Creating Database Tabels 
- - 


Stage 3) 
Creating Web Site Pages 
Stage 1: Designing Web Pages 
This is the first stage of the implementation of the project, in which the project’ web pages, the name of 
each page, the purpose, and its content will be determined. Also we will define a proposal for designing 
the main page components and the Hyperlinks used in web pages navigation and return back to home 
page, Good design of the site before the beginning of creation, it saves time and effort, also helps in 
producing special and professional site. 
The following figure shows a proposal for designing “Photographer Computer Terminology” Dictionary 
site’ pages:- 
Index.php 
Connection.php 
Header.php 
Add_Term.php 
Search_Term.php 
Edit_Term.php 
Del_Term.php 
Help.php 
To avoid writing code in all the site pages are as follows: 
1. Separate the image Banner and Hyperlinks in a separate page that is called in the beginning of each 
page. 
2. Separate connects code to the database in a separate page that is called at the beginning of each 
page. 
3. Image that appears atthe beginning of each page called Banner 
4. All Hyperlinks that we use to navigate between pages of the site are: (Main - Add term - Search term 
—Edit - Delete - Help). 


Evaluation: - 


Complete: .................. is the first stage of the implementation of the project. 
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Unit 2: Requirements and production 
stages of the project 
Lesson 2: Create a Database 


By the end of the lesson, the student should be able to: Corporative learning - Dialogue and 


= Recognize some basic concepts related to databases. discussion 

=" Createadatabase ofthe project "Photographer 
Computer Terminology Dictionary". 

=" Practice linking databases operations. 


Electronic board - Student's Book - 
- presentation 


Warm up / What are the different between database and table? 


Lesson Presentation 


The second stage inthe construction phase ofthe "Photographer Computer Terminology Dictionary" 
project database, and before starting, must be identified on some ofthe basic concepts of databases. 


Database: - is a store or save a set of structured data associated with a particular subjectin orderto 
restore itto make decisions. 
Tables: - represents infrastructure orthe main component ofthe 


database, and consists of Records and Fields. — m заана 


Records: - Arow of datatable containing all the data for only one ամին աի ։: Д 


регѕопогопе саѕе. scords = 
: յ Қ ի | որ» s9 [6| 
Fields: - is the infrastructure that makes up the datatable, any T Leu» 


columninatable is afield, and the field contains only one | ЖЕН [s 


OEKLTONNEME E 
statementforeach record of the table records. 


Eachfield has many of properties including: Field Name - Field Data Type - 


Field Size: It isthe number of digits or characters in the case of the text field, orselectthe type of numbers 
entered inthe case of the numeric field (Integer - contains a Decimal - etc). 


Y Youcancreate database that consists of only one table containing all the necessary fields and inthis 
case the table is called "Flat Table". 
Y Тһе matter requires creating relations between the database tables to each other, so as to avoid 
duplication of data or fields, and in this case the database is called Relational Database. 
Y Toensurethe success of the linking process between database tables, you mustachieve the 


following: 


(1) Seta "Primary Key’: 
" Seta "Primary Key’ field for each table, and that by one of two ways: 
1. Selecta field from the table fields: the requirement will not be repeated any statement in this 
field at all, even with the huge volume of data. 
Or 
2. Addanewfield: itis set or allocated as a Primary key field. 
Evaluation: - 
Complete: .................. isthe place "row" where the integrated data are stored into the table. 
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Unit 2: Requirements and production 
stages of the project 
Lesson 3: Follow Create a Database 


By the end of the lesson, the student should be able to: Corporative learning ыы Dialogue and 


= Practice linking databases operations. discussion - Brainstorming 
= Classify the relations in databases. 


" Cooperate with his colleagues in the creation of 


Electronic board - Student's Book - 
database tables. 


- presentation 


Warm up / What are the types of relationships in databases? 


Lesson Presentation 


— Determine the types of relationships in databases: 


Types of relationships in databases 


First Type Second Type Third Type 
One to One One to Many Many to Many 


First Туре: One to One 

ARelationship betweentwotables, where you can join arecord inthefirsttable with only one record ofthe 

secondtable, and vice versa. 

The primary key fields in the two tables must be: 

(1) Thesame Data Type. 

(2) Thesamesize. 

(3) Donotrequireto bethe primary key fields inthe twotables have the same name. 

"Foreign Key’, because itis not of the nature of the table and itis considered an outsider field. 

Second Type: One to Мапу 

А Relationship between two tables so that you can join a record inthe first table with numerous records in 

the second table and not vice versa. 

= Todolink between the two tables inthe one -many relationships should be added the primary key field 
inthetable One ("classes table" )to table Many ("students table”), itis called inthis case "aforeignfield" 
(Foreign Key) because itis not of the nature of the table, but it outsider field. 

" In the foreign key field (the class number in students table), data can be repeated, and called 
Controlled redundancy. 

Third Type: Manyto Many 

= ARelationship between two tables where one or more rows in a table are associated with one or more 
rows in anothertable. 

=" Many-To-many relationships a theoretical relationship of concepts of databases, and cannot be 
represented practically in database management programs such as Access - Oracle - MySQL ... etc. 

" Database managementsystem include basic Objects such as: 

Tables: - Through which we can create database tables containing records and fields, and the possibility 

of entering, displaying and modifyingthe data. 

Queries: - is arequest for information from a database forthe purpose of data or information inthe tables. 


Evaluation: - 
Complete: .................. relationship betweentwotables, bothtables have only one record associated 
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Unit 3: Creating Site Pages 


Lesson 1: PHP&HTML languages 


By the end ofthe lesson, the student should be able to: Corporative learning = Dialogue and 


= Practice steps of creating asite using the application discussion - Brainstorming 
Expression Web. 
" knowHTML markup language. 


. Electronic board - Student's Book - 
" Create Web pages with HTML code. 


- presentation 


Warm up / What 'S Hyper Text Markup Language? 


Lesson Presentation 
— Create web pages: 


Add term.php: Whichis usedto add anewterm. 

Search term.php'": The term used inthe search for and view its data 

Edit_term.php: Through which we can modify any statement of a particularterm. 

Del_term.php: through which you can delete a certain term 

Help.php: Information on howto deal with the site "Illustrated Dictionary of Computer Terms. 
Connection.phppage :їо open a connection to the database on the server machine. 

eHeader. Php page contains the following: 

1. Banner that is displayed on all pages of the site. 

2. Hyperlinks to all pages of the site. 

HTML: - It's a coding language used to create Web pages that saved with the extension of the .htm or 
.htmi so thatit can be displayed. 

"you can write HTML code using a word processing programs, such as: (MSWord, WordPad, Notepad 
"Тһе code begins with <Html> and ends with </ Html> 


: : . : The structure of a program in HTML 
E The command written in HTML coding language is called Ո _ The structure ога program in HTML | 


Tag. <html> 


E Eachtaghas acertaintaskto perform. i <head> 


и tis possible to be written in capital or small letters. «Title» zu shal iaia 4) 5¢</Title> 


"Tags commands inthe markup languageHTMLare placed | </head> 
between two brands<> i <body> 
</body> 


or Close </ > 
</һіті> 


"Some tags don't have aclose or an end such as <BR>. 
= Save the file in any HTML code name with the extension .htm or .html. 


=" After saving the file with the previous specifications, ittakes Internet browser code available on your 
computer, such as: Internet Explorer or Google Chrome or Mozilla Firefox Etc... 


Evaluation: - 
Complete: HTML code/file save as type............. 
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Unit 3: Creating Site Pages 
Lesson 2: Follow PHP&HTML 
languages 


| 


ne ea ae 


By the end ofthe lesson, the student should be able to: Corporative learning = Dialogue and 


= Practice steps of creating asite using the application discussion - Brainstorming 
Expression Web. 


" knowHTML markup language. 


. Electronic board - Student's Book - 
" Create Web pages with HTML code. 


- presentation 


Warm up / What 'S the different between variable and constants? 


Lesson Presentation 


— Loading Expression Web program: 

Fromthe start menu, selectthe program Microsoft Expression Web 4 as shown inthe following figures: 
(1) MenuBar 

(2) FolderList 

(3) Tag Properties 

(4) Website component 

(5) Toolbox 

(6) Apply Style 

— AVariable: - is storeroom inthe memory that has a name and type for which we allocate a value to be 
stored in and its value is changed during the course of the program. For example: $Total = 450; 

- Variable name begins with an."$" 

-Variable name consists of letters, numbers and sign " " only. 

- Variable name should express its content or whatit refers to. 

- Assignmentsignis "=". 

- Each sentence ends in PHP sign language; 

-To print any information onthe browserscreen use Print or Echo, as follows: 

- Echo Code can be used to assemble more than a fixed orvariable on printing on the browser screen and 


thenseparatethembyadot. . 
— PHP constants in the language: are stores in memory bearing the name and type with an assigned fixed 
value that does not change throughout the implementation of the program, and can be defined by the 
following general formula: define (‘Constant Name’, Value); 
For example: 

define (‘name’, Mohamed); 

echo (‘my nameis:'. name); 

We use a(.) Inthe second line of the code to link the two literal series. 

We used the constant withoutthe $ sign. 

Define "is used to define constant. 

Each line in PHP language ends with a semicolon; 

Evaluation: - 


Complete: The variable's name in PHP language end with 
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Unit 3: Creating Site Pages 
Lesson 3: Transactions and 
conditional sentences in PHP 


\ 


ne ica am 


By the end of the lesson, the student should be able to: Corporative learning - Dialogue and 


= Explain If conditional in the language of PHP. discussion - Brainstorming 
= Recognize inter Switch in the language of PHP. 


= Employ different formulas of "If" phrases z:5 Switch 
insolving problems. 


Electronic board - Student's Book - 
- presentation 


Warm up / What 'S the meant by operator? 


Lesson Presentation 
— Operators: 


(1) Mathematical Operators of two types (normal - other) 


Operator Refers to Example Example outcome 


+ Addition 


Subtraction 


Multiplication 
division 


Residual of 


division 


(2) There are other mathematical operators to the PPH language. 


(3) compared operators: 


IF Condition: 

Among the IF condition, by which software developers can develop a particular condition and test it. If the result of 
the condition is true, the program can implement of specific code, and if the result of the implementation of the 
condition is not properly, it can have carried out another code. 

Switch statement: 

Be used as one of the conditional phrases in the language of PHP, from which a number of conditions are checked 
and each time the condition executes specific code, 


Evaluation: - 
Complete: is one of compared operators 
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Unit 3: Creating Site Pages 
Lesson 4: "Add_Term.php" page 


қыссасы ыы 


Вуіһе end ofthe lesson, the student should be able to: Corporative learning = Dialogue and 


= Design interface input page term. discussion - Brainstorming 
= Write PHP codeto include My Page Header & 
Connection. 


Electronic board - Student's Book - 


=" Createapageof 'entertheterm" - presentation 


Warm up / How can you create a web pages and save them to the location on your 
computer folder? 


Lesson Presentation 


— Interface design input page term: 


Through one of the applications used to create web pages (such as Expression Web) you can create a 
page with the following design entryterm: 
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— you can write texts as in the previous screen and the use of "Toolbox" on top right of the screen to insert 
the controls on the page. 
— Тһе" Form " is used to pass or send all the form data in control tools of the Web browser to the 
Webserver. There are two ways to send the form data, namely: 
<form method-"GET"» 
«form method="POST'> 
— Where we can adjust Method property with the value POST or GET. 
» Differences between the values (POST) and (GET): 


Get Post 
Transmitted data do not appear in the "URL" page 
address. 
They are used to send secret or any important data 
words. 


Transmitted data appear in the "URL" page address. 


They are not used to send secret or any important data words. 


It has a limit of the data used up to Its Maximum data used is up : 3 
to 8 Mb 7607 Character symbols. Its Maximum data used is up to 8 Mb 


Evaluation: - 


Complete: They are used to send secret or any important data words. 
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Unit 3: Creating Site Pages 
Lesson 5: Follow "Add_Term.php" 


ae pica eee 


By the end of the lesson, the student should be able to: Corporative learning - Dialogue and 


= Design interface input page term. discussion - practical learning 
= Write PHP codeto include My Page Header & 
Connection. 


=" Createapageof 'entertheterm" 


Electronic board - Student's Book - 
- presentation 


Warm up / How can you create a web pages and save them to the location on your 
computer folder? 


Lesson Presentation 
— Writing PHP code: 


e Toconnectto the database. 
e Verify typing datain the controls onthe web page. 


e Registerterm data inthe database table through PHP code: 


<?php 
include("connection.php"); 
ifissets POST['Submitl'])) Conditional clause to 


( check for pic folder 

ifl'is dirpic)) ( mkdir(pic); } 7 created in case of non- 
(15Ше-5 FILES[Filel']| ваше); existence 
@$tmp=$_FILES[Filel']['tmp_name'); 


if'empty($file)) { move uploaded file(Stmp.'pic^.Sfile); ) Ն | 
Sterm=$_POST['txt_term’]; բ 
al clause check ifwe 
file 


$trans-5 POST['trans/]; It is condition 
Sdefe-5 POST['TextAreal']; selected image 
$picture-"pic/" . $file . " "; 
if( Sterm !== "" && $trans !— "" && Sdefe !— "" && 'empty(Sfile) ) 
{ 
mysql query(" SET NAMES 'utf$'"); 
Squery-mysql query("isert into terms values(" "Sterm','Strans' 'Sdefe' "Spicture")"); 
if(Squery) 
լ 
Sdatares-" glai Ld 48.2) a": 
echo("«label id="Labell’ style="color: #FF0000; font-size: x-large;"> $datares </label> "); 
) 
else 
{ | 
Sdatares-" — 4! 18.21 at a": 
echo("«label id="Labell’ style-'color: $FF0000;font-size: x-large;"> $datares </label> "); 


Sdatares="J 2) չա» Да? «այու» yb uad Sc"; 
echo("«label id-Labell' style="color: #FF0000-font-size: x-large;'> Sdatares ՀԵՀ» "); 


Evaluation: - 
Complete: 
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Unit 3: Creating Site Pages 
Lesson 6: Follow "Add Term.php" 


Bytheendofthelesson,the studentshould be ableto: Corporative learning - Dialogue and 


= Designinterface input page term. discussion - practical learning 
= Write PHP codetoinclude My Page Header & 
Connection. А 
" " Electronic board - Student s Book - 

= Createapageof entertheterm - presentation 


Warm up / How can you create a web pages and save them to the location on your 
computer folder? 


Lesson Presentation 


— Executing "Add term page" 


On browsing "enter term page’ inthe internet browser, the page appears and throughthe 
following address: 


inl! ge uiid ey Aag ot Կայ 2 ald ad 


Be sure to add the term to the database 


To make sure that you insert datato a new record inthe database, open the database ina 
new tab Internet browser by typing the following link "localhost / phpmyadmin’ inthe 
address bar and make sure insert a new record inthe "terms table 


Evaluation: - 
Evaluate student's project. 
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By the end ofthe lesson, the student should be able to: Corporative learning = Dialogue and 


= Identifythe mostimportantterms of the lesson. discussion 
= Solve the student's book exercises. 
= Write the project's code in right way. 


Electronic board - Student's Book - 
- presentation 


Warm up / What are the most important concepts for these term? 


Lesson Presentation 


(A)Choose the correct answer: 
1. The programs that we used without cost called 
(Freeware - open source programs -- copy right) 
2. Wecanview code of and we can edit, develop and publish it 
after editing. 
(Freeware - open source programs - copy right) 
3. Theextension of static web page is (asp — php - html) 
4. Theweb pagethat we can process page suchas return value or view message 
or result called 
(Static web page - dynamic web page - home page) 
5. Theweb page where we can create account called 
(Static web page - dynamic web page - both) 
6. The computer of high specifications from another computers in the network 
anditcan controlled them called 
(Hardware server — software server – web server) 
7. Thetaskof one ofthe computers in network called 
(Hardware server — software server – web server) 
8. Thecomputer which we stored web pages on ofthe network called 
(mail server - printserver — web server) 
9. Тһе computer connected to printer and control the management of printing of 
the network called 
(mail server - print server – web server) 
10. The computer which we stored electronic mail on and control the 
management of electronic mail processing called 
(mail server - printserver - database server) 
11. The computer which we stored database on and control the management of 
dealing of computers of the network with database called 
(mail server - printserver – database server) 
Evaluation: - 
Evaluate student's answer 
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